<template>
  <div
    id="aside"
    :style="{
      backgroundColor: pageColor
    }"
  >
    <div class="logo">
      <img
        src="@/assets/img/login.png"
        alt=""
        :style="{ marginLeft: props.shrink ? '110px' : '0px' }"
      />
    </div>
    <el-row>
      <el-col>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          active-text-color="#ffd04b"
          :background-color="pageColor"
          text-color="#fff"
          :collapse="props.shrink"
          router
        >
          <template v-for="item in props.userMenu" :key="item.path">
            <template v-if="item.children">
              <el-sub-menu :index="item.path">
                <template #title>
                  <i class="iconfont" :class="item.iconfont"></i>
                  <span>{{ item.name }}</span>
                </template>
                <template
                  v-for="childItem in item.children"
                  :key="childItem.path"
                >
                  <el-menu-item :index="childItem.path">{{
                    childItem.name
                  }}</el-menu-item>
                </template>
              </el-sub-menu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path">
                <i class="iconfont" :class="item.iconfont"></i>
                <span>{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { UserMenuTypes } from '@/server/serve/api_admintor'

interface PropsTypes {
  shrink: boolean
  userMenu: Array<UserMenuTypes>
}
const props = defineProps<PropsTypes>()
const store = useStore()

// 当前背景主题
const bgcColor = computed(() => store.state.Background)

// 页面背景改变
let pageColor = ref<string>(
  bgcColor.value.color === '#000' ? '#545c64' : '#212130'
)
watch(
  () => bgcColor.value,
  (newVal) => {
    pageColor.value = bgcColor.value.color === '#000' ? '#545c64' : '#212130'
  }
)

// console.log(bgcColor.value.color)
</script>
<!-- #59D1FF -->
<style scoped lang="less">
#aside {
  min-height: 100vh;
  .logo {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    img {
      width: 160px;
      height: 30px;
    }
  }

  .el-row {
    .el-col {
      .el-menu {
        border-right: none;

        .el-menu-item {
          i {
            margin-right: 10px;
            font-size: 20px;
          }
        }
        .el-sub-menu {
          i {
            margin-right: 10px;
            font-size: 17px;
          }
          .el-menu-item {
            i {
              margin-right: 10px;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
